<template>
	<view class="container">
		<view class="bg">
			<image src="../../static/images/wechatPayBg.jpg"></image>
		</view>
		<view class="product-box">
			<view class="product-desc-title">产品介绍</view>
			<view class="product-desc">
				沙雕，是一个网络流行词，原本是一句不文明用语的谐音，因为和谐或者输入方便等各种原因而逐渐演变成“沙雕”。现多指有趣的人和搞笑的人，词义较为中性，略带贬义。例如沙雕网友。考虑到用语文明，不建议频繁使用。
			</view>
		</view>
		<view class="deposit-box">
			<view class="deposit-title">保录预定金：3300元</view>
			<view class="deposit-desc">说点题外话，最近b站的梗文化越来越变味了，原来「草（中日双语）」「2333」这样的黑话梗越来越少，「草（一种植物）」「下次一定」如此一看就懂的梗却大行其道。私以为梗文化是小众的文化，它更倾向于一种「黑话」。</view>
		</view>
		<view class="pay-box">
			<view class="declare-box" @tap="changeAgree">
				<view class="radio-box" v-show="isChecked">
					<image src="../../static/images/check.png"></image>
				</view>
				<view class="radio-box" v-show="!isChecked">
					<view class="no-check"></view>
				</view>
				<view class="radio-label">隐私声明，建议阅读之后使用此功能</view>
			</view>
			<view class="pay-submit" @tap="goIntentionTest">支付预定金</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked: false
			}
		},
		
		methods: {
			
			changeAgree() {
				this.isChecked = !this.isChecked
			},
			
			goIntentionTest() {
				uni.navigateTo({
					url: '/pages/intention_test/intention_test'
				})
			}
			
		}
	}
</script>

<style>
	.container {
		width: 750rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	
	.bg image {
		width: 750rpx;
		height: 1600rpx;
		z-index: 1;
	}
	
	.product-box {
		width: 750rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 332rpx;
		width: 450rpx;
		z-index: 3;
	}
	
	.product-desc-title {
		font-size: 32rpx;
		color: #5683ec;
		font-weight: bold;
	}
	
	.product-desc {
		font-size: 24rpx;
		text-align: center;
		margin-top: 30rpx;
	}
	
	.deposit-box {
		width: 606rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		box-shadow: 0rpx 8rpx 18rpx 0rpx rgba(10, 10, 10, 0.02);
		border-radius: 20px;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		z-index: 3;
		margin-top: 70rpx;
	}
	
	.deposit-title {
		font-size: 32rpx;
		color: #fc0505;
		font-weight: bold;
	}
	
	.deposit-desc {
		width: 506rpx;
		font-size: 24rpx;
		color: #333333;
		margin-top: 30rpx;
	}
	
	.pay-box {
		width: 750rpx;
		height: 150rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 3;
	}
	
	.declare-box {
		width: 750rpx;
		height: 56rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 96rpx;
	}
	
	.radio-label {
		font-size: 22rpx;
		color: #4073ea;
		margin-left: 16rpx;
	}
	
	.pay-submit {
		width: 702rpx;
		height: 80rpx;
		background-color: #4073ea;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.radio-box {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.radio-box .no-check {
		width: 20rpx;
		height: 20rpx;
		border: solid 1rpx #999999;
		border-radius: 50%;
	}
	
	.radio-box image {
		width: 20rpx;
		height: 20rpx;
	}
</style>
